<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width" />
<meta name="author" content="hxz" />
<meta name="robots" content="all" />
<title>文章</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="layui/css/layui.css" />
<link rel="stylesheet" href="css/master.css" />
<link rel="stylesheet" href="css/gloable.css" />
<link rel="stylesheet" href="css/nprogress.css" />
<link rel="stylesheet" href="css/blog.css" />
<link rel="stylesheet" href="css/prism (4).css" />
<script src="https://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/yss/gloable.js"></script>
<script src="js/prism (4).js"></script>
<script src="js/plugins/nprogress.js"></script>
<script src="js/yss/article.js"></script>
<!--该css为控制页面样式css-->
<style>
.content {
	width: 100%;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	text-indent: 2em;
}

ul.pagination {
	transform: translate(+160%, +30%);
	margin-left: 29%;
	margin-top: 20px;
	display: inline-block;
	padding: 0;
	text-align: center;
}

ul.pagination li {
	display: inline;
}

ul.pagination li a {
	color: white;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
}
</style>
</head>
<body>
	<div class="header"></div>
	<header class="gird-header">
		<div class="header-fixed">
			<div class="header-inner">
				<a href="#" class="header-logo" id="logo">blog</a>
				<nav class="nav" id="nav">
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><a href="article.html">博客</a></li>
						<li><a href="message.html">留言</a></li>
						<li><a href="link.html">友链</a></li>
					</ul>
				</nav>
				<a href="/User/QQLogin" class="blog-user"> <i class="fa fa-qq"></i>
				</a> <a class="phone-menu"> <i></i> <i></i> <i></i>
				</a>
			</div>
		</div>
	</header>
	<div class="doc-container" id="doc-container">
		<div class="container-fixed">
			<div class="col-content">
				<div class="inner" id="contents">
					<article class="article-list bloglist" id="LAY_bloglist">
						<!-- start 文章详情页在此开始 -->
						<!-- end -->
					</article>
				</div>
			</div>
			<div class="col-other">
				<div class="inner">
					<div class="other-item" id="categoryandsearch">
						<div class="search">
							<label class="search-wrap"> <input type="text"
								id="searchtxt" placeholder="输入关键字搜索" name="key" /> <span
								class="search-icon"> <i class="fa fa-search"
									onclick="searcharticle()"> </i>
							</span>
							</label>
							<ul class="search-result"></ul>
						</div>
						<ul class="category mt20" id="category">
							<li data-index="0" class="slider"></li>
							<li data-index="1"><a href="/blog/Article">全部文章</a></li>
							<li data-index="2"><a href="/blog/Article/1/">个人笔记</a></li>
							<li data-index="3"><a href="/blog/Article/2/">Java</a></li>
							<li data-index="4"><a href="/blog/Article/3/">Liunx</a></li>
							<li data-index="5"><a href="/blog/Article/4/">前端</a></li>
							<li data-index="6"><a href="/blog/Article/5/">其它</a></li>
						</ul>
					</div>
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle">
						<i class="layui-icon">&#xe603;</i>
					</div>
					<div class="article-category">
						<div class="article-category-title">分类导航</div>
						<a href="/blog/article/1/">个人笔记</a> <a href="/blog/Article/2/">HTML5&amp;CSS3</a>
						<a href="/blog/article/3/">Java</a> <a href="/blog/Article/4/">Liunx</a>
						<a href="/blog/article/5/">前端</a>
						<div class="f-cb"></div>
					</div>
					<!--遮罩-->
					<div class="blog-mask animated layui-hide"></div>
					<div class="other-item">
						<h5 class="other-item-title">热门文章</h5>
						<div class="inner">
							<ul class='hot-list-article' id="hot">
							</ul>
						</div>
					</div>
					<div class="other-item">
						<h5 class="other-item-title">置顶推荐</h5>
						<div class="inner">
							<ul class="hot-list-article" id="istop">
							</ul>
						</div>
					</div>
					<div class="other-item">
						<h5 class="other-item-title">最近访客</h5>
						<div class="inner">
							<dl class="vistor">
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/72388EA977643E8F97111222675720B1/100"><cite>Anonymous</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/342F777E313DDF5CCD6E3E707BB0770B/100"><cite>Dekstra</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/EA5D00A72C0C43ECD8FC481BD274DEEC/100"><cite>惜i</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/EF18CEC98150D2442183AA30F05AAD7B/100"><cite>↙Aㄨ计划
											◆莪↘</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/3D8D91AD2BAFD36F5AC494DA51E270E6/100"><cite>.</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/B745A110DAB712A0E6C5D0B633E905D3/100"><cite>Lambert.</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/E9BA3A2499EC068B7917B9EF45C4D13C/100"><cite>64ღ</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/09F92966169272DD7DD9999E709A0204/100"><cite>doBoor</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/59991D53192643A1A651383847332EB6/100"><cite>毛毛小妖</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/FF34F311DDC43E2AF63BE897BCA24F05/100"><cite>NULL</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/59AA25A7627284AE62C8E6EBDC6FE417/100"><cite>吓一跳</cite></a>
								</dd>
								<dd>
									<a href="javasript:;"><img
										src="https://thirdqq.qlogo.cn/qqapp/101465933/28B021E0F5AF0A4B9B781A24329FE897/100"><cite>如初</cite></a>
								</dd>
							</dl>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 分页开始 -->
		<div class="pages">
			<ul class="pagination" id="pagination">
			</ul>
		</div>
	</div>
	<footer class="grid-footer">
		<div class="footer-fixed">
			<div class="copyright">
				<div class="info">
					<div class="contact">
						<a href="javascript:void(0)" class="github" target="_blank"><i
							class="fa fa-github"></i></a> <a
							href="https://wpa.qq.com/msgrd?v=3&uin=1278028562&site=qq&menu=yes"
							class="qq" target="_blank" title="1278028562"><i
							class="fa fa-qq"></i></a> <a
							href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw"
							class="email" target="_blank" title="1278028562@qq.com"><i
							class="fa fa-envelope"></i></a> <a href="javascript:void(0)"
							class="weixin"><i class="fa fa-weixin"></i></a>
					</div>
					<p class="mt05">Copyright &copy; 2019 侯晓铮 All Rights Reserved
						V.1.0.0</p>
				</div>
			</div>
		</div>
	</footer>
	<script type="text/javascript">
		window.onload = function() {
			var pageNum = 1;
			function getUrlParam(name) {
				//构造一个含有目标参数的正则表达式对象  
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				//匹配目标参数  
				var r = window.location.search.substr(1).match(reg);
				//返回参数值  
				if (r != null) return unescape(r[2]);
				return null;
			}
			var pageNum = getUrlParam("pageNum");
			if (pageNum == null || pageNum == "") {
				pageNum = 1;
			}
			$(document).ready(function() {
				$.ajax({
					url : "/blog/article/list?pageNum=" + pageNum, //后台请求的数据
					dataType : "json", //数据格式 
					type : "get", //请求方式
					async : false, //是否异步请求
					success : function(data) { //如果请求成功，返回数据。
						//置顶
						$.each(data.list, function(i, ls) {
							if (ls.top == 1) {
								$("#istop").append(
									"<li><a href=>" + ls.title + "</a></li>"
								)
							}
						});
						var arr = [];
						$.each(data.list, function(i, ls) {
							if (ls.top == 1) {
								$("#contents").append(
									"<section class='article-item zoomIn article' id='content'> "
									+ "<div class='fc-flag'>置顶 </div>"
									+ "<h5 class='title'> <span class='fc-blue'>【原创】</span> <a href='" + "read.html?id=" + ls.id + "'>" + ls.title + "</a></h5>"
									+ "<div class='time'> </span></span> <span class='year fs-18 ml10'>" + ls.date + "</span></div>"
									+ "<div class='content' >" + ls.content + "</div>"
									+ "<div class='read-more'> " + "<a href='" + "read.html?id=" + ls.id + "'>继续阅读</a></div>"
									+ "<aside class='f-oh footer'>"
									+ " <div class='f-fl tags'> <span class='fa fa-tags fs-16'></span> <a class='tag'>" + ls.category + "</a> </div>"
									+ " <div class='f-fr'> <span class='read'> <i class='fa fa-eye fs-16'></i> <i class='num'>" + ls.viewnum + "</i></span> <span class='ml20'>"
									+ "<i class='fa fa-comments fs-16'></i><a href='javascript:void(0)' class='num fc-grey'>" + ls.commentnum + "</a>+ </span></div>"
									+ "</aside></section>")
							} else {
								$("#contents").append(
									"<section class='article-item zoomIn article' id='content'> "
									+ "<div > </div>"
									+ "<h5 class='title'> <span class='fc-blue'>【原创】</span> <a href='" + "read.html?id=" + ls.id + "'>" + ls.title + "</a></h5>"
									+ "<div class='time'> </span></span> <span class='year fs-18 ml10'>" + ls.date + "</span></div>"
									+ "<div class='content' >" + ls.content + "</div>"
									+ "<div class='read-more'> " + "<a href='" + "read.html?id=" + ls.id + "'>继续阅读</a></div>"
									+ "<aside class='f-oh footer'>"
									+ " <div class='f-fl tags'> <span class='fa fa-tags fs-16'></span> <a class='tag'>" + ls.category + "</a> </div>"
									+ " <div class='f-fr'> <span class='read'> <i class='fa fa-eye fs-16'></i> <i class='num'>" + ls.viewnum + "</i></span> <span class='ml20'>"
									+ "<i class='fa fa-comments fs-16'></i><a href='javascript:void(0)' class='num fc-grey'>" + ls.commentnum + "</a>+ </span></div>"
									+ "</aside></section>")
							}
						});
						//分页开始
						$("#pagination").append(
							"<li><a href='#'>«</a></li>"
						);
						$.each(data.navigatepageNums, function(i, ls) {
							$("#pagination").append(
								"<li><a href=/blog/article.html?pageNum=" + ls + ">" + ls + "</a></li>"
							)
						});
						$("#pagination").append(
							"<li><a href='#'>»</a></li>"
						);
						//获取热门文章
						$.each(data.list, function(i, ls) {
							$("#hot").append(
								"<li><a >" + ls.title + "</a></li>"
							)
						});
					},
				})
	
			})
	
		}
		//搜索文章函数，这里是模糊查询
		function searcharticle() {
			var key = $.trim($("#searchtxt").val());
			var data = {
				"key" : key
			};
			if (key == null || key == "") {
				alert("不能为空");
				return false;
			}
			$.ajax({
				url : "/blog/article/search",
				dataType : "json", //数据格式 
				data : {
					"key" : key
				},
				type : "post", //请求方式
				async : true, //是否异步请求
				success : function(data) {
					if (data != null || data != "") {
						$('#contents').html("");
						$.each(data, function(i, ls) { //function第一个参数表示下标，第二个参数表示一维数组中的每一个数组
							//==1时才置顶
							$("#contents").append(
								"<section class='article-item zoomIn article' id='content'> "
								+ "<div class='fc-flag'>" + "置顶" + "</div>"
								+ "<h5 class='title'> <span class='fc-blue'>" + "【原创】" + "</span> <a href='#'>" + ls.title + "</a></h5>"
								+ "<div class='time'> </span></span> <span class='year fs-18 ml10'>" + ls.date + "</span></div>"
								+ "<div class='content' >" + ls.content + "</div>"
								+ "<div class='read-more'> " + "<a href='" + ls.id + "'>继续阅读</a></div>"
								+ "<aside class='f-oh footer'>"
								+ " <div class='f-fl tags'> <span class='fa fa-tags fs-16'></span> <a class='tag'>" + ls.category + "</a> </div>"
								+ " <div class='f-fr'> <span class='read'> <i class='fa fa-eye fs-16'></i> <i class='num'>" + ls.viewnum + "</i></span> <span class='ml20'>"
								+ "<i class='fa fa-comments fs-16'></i><a href='javascript:void(0)' class='num fc-grey'>" + ls.connent + "</a>+ </span></div>"
								+ "</aside></section>");
						})
					} else if (data == "[]") {
						alert("暂时查不到你想要的文章哦");
					}
				}
			})
		}
	</script>
</body>
</html>
